<template>
  <div class="box">
    <div>
      <el-row>
        <el-col :span="18">
          <video :src="detail.url" controls width="900" height="550"></video>
        </el-col>
        <el-col :span="6" class="bot">
          <div class="area">
            <h3>当前播放</h3>
            <el-row
              ><el-col :span="10">
                <video
                  class="video"
                  :src="detail.url"
                  style="width: 120px"
                  @canplay="getVidDur(0)"
                ></video>
              </el-col>
              <el-col :span="14">
                <p>{{ detail.title }}</p>
                <h5>{{ detail.duration }}</h5>
              </el-col>
            </el-row>
          </div>
          <div class="area">
            <h3>其他推荐</h3>
            <el-row v-for="item,index in disList" :key="item.id" @click.native="otherVideo(item.id)"
              ><el-col :span="10">
                <video
                  class="video"
                  :src="item.url"
                  style="width: 120px"
                  @canplay="getVidDur(index)"
                ></video></el-col>
              <el-col :span="14">
                <p>{{item.title}}</p>
                <h5>{{ item.duration }}</h5>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="15"><h1>{{ detail.title }}</h1></el-col>
        <el-col :span="2" class="icon" @click.native="changeLike">
          <i v-show="!detail.isCollection" class="iconfont icon-shoucang3"></i>
          <i v-show="detail.isCollection" class="iconfont icon-shoucang2"></i></el-col
      ></el-row>
      <div class="label">
        <span
          v-for="(item2,index2) in vid.label"
          :key="item2"
          :class="colorArr[index2%4]"
          >{{ item2 }}</span
        >
      </div>
    </div>
    <el-row class="centop">
      <el-col :span="4">
        <span class="acspan">经验推荐</span>
      </el-col>
      <el-col :span="3" :offset="17"> </el-col>
    </el-row>
    <div class="exp">
      <Exprec></Exprec>
    </div>
  </div>
</template>

<script>
//获得视频时长
let videofn = (i) => {
  var video = document.getElementsByClassName("video")[i];
  console.log(video);
  let duration = video.duration;
  let h = parseInt((duration / 60 / 60) % 24);
  h = h < 10 ? "0" + h : h;
  let m = parseInt((duration / 60) % 60);
  m = m < 10 ? "0" + m : m;
  let s = parseInt(duration % 60);
  s = s < 10 ? "0" + s : s;
  return h + ":" + m + ":" + s;
};
import Exprec from "../components/Exprec.vue";
export default {
  components: {
    Exprec,
  },
  data() {
    return {
      colorArr: ["bi-bg", "yi-bg", "ri-bg", "gi-bg"],
      vid: {
        label: ["脑部", "颅脑"],
        isLike: false,
      },
      detail: {
        duration: "00:00",
      },
      disList:[]
    };
  },
  methods: {
    changeLike() {
      let detail = this.detail;
      let allData = {
        targetId: detail.id,
        status: detail.isCollection == false ? 1 : -1,
        type: 3,
      };
      this.$store.dispatch("collection", allData).then((res) => {
        this.detail.isCollection = !this.detail.isCollection;
        //改变数量
        this.detail.collectionNum=detail.isCollection == true ?this.detail.collectionNum+1:this.detail.collectionNum-1
        
      });
    },
    getVidDur(i) {
      if (i == 0) {
        let s = videofn(1);
        this.detail.duration = s;
      } else {
        let s = videofn(i+1);
        this.disList = this.disList.map((item, index) => {
          if (index == i) {
            item.duration = s;
          }
          return item;
        });
      }
    },
    otherVideo(id){
      this.$axios({
      url: "/video/selectAll",
      method: "get",
      params: {
        id: id,
      },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        this.detail = res.data;
      }
    });
    }
  },
  created(){
    this.$axios({
      method: "get",
      url: "/video/selectAll",
      params: {
        page: 1,
        size: 8,
      },
    }).then((res) => {
      console.log(res);
      if (res.code != "200") {
        this.$message.error(res.msg);
      } else if (res.code == "200") {
        this.disList = res.data.map((item) => ({ ...item, duration: "00:00" }));
      }
    });
  },
  mounted() {
    let id = this.$route.query.id;
    this.$axios({
      url: "/video/selectAll",
      method: "get",
      params: {
        id: id,
      },
    }).then((res) => {
      console.log(res);
      if (res.code == "200") {
        this.detail = res.data;
      }
    });
  },
};
</script>

<style lang="less" scoped>
.box {
  background-color: #f2f7fb;
  overflow: hidden;
  & > div {
    width: 1200px;
    margin: 50px auto;
  }
  & > div:first-child {
    padding: 30px;
    width: 1200px;
    margin: 50px auto;
    background-color: #312a6d;
    & h1 {
      color: #fbfbfb;
      text-align: left;
      font-weight: 400;
      margin: 5px 20px;
    }
    .label {
      text-align: left;
      margin: 5px 20px;
      height: 40px;
      span {
        background-color: #9ba5bb;
        color: white;
        font-size: 8px;
        border-radius: 5px;
        padding: 5px 8px;
        margin: 5px 2px;
        text-align: left;
      }
    }
    .icon > i {
      font-size: 40px;
      margin-top: 10px;
      display: inline-block;
      color: #fcc64a;
    }
  }
  .area {
    padding: 10px;
    box-sizing: border-box;
    text-align: left;
    user-select: none;
    h3 {
      color: white;
      font-weight: 400;
    }
    h5 {
      color: #aaa;
      position: absolute;
      bottom: 5px;
      margin-left: 5px;
      font-size: 18px;
      font-weight: 400;
    }
    & > div {
      margin: 10px 0;
      position: relative;
      &:hover p {
        color: #fcc64a !important;
      }
    }
    p {
      color: #aaa;
      font-size: 16px;

      margin-left: 5px;
    }
    img {
      width: 100%;
    }
  }
  .bot {
    height: 550px;
    overflow-y: scroll;
    background-color: rgba(253, 253, 253, 0.075) !important;
    &::-webkit-scrollbar {
      width: 0px;
    }
  }
}
</style>